<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        body,html{
           background-color: #a5a5a5;
        }
        *{
            margin: 0;
            padding: 0;
        }
        p {
            font-size: larger;
        }

        .lei {
            font-size: large;
            color: aqua;
        }

        #name {
            font-size: large;
            color: aquamarine;
        }

        h1,
        h2,
        h3,
        h4 {
            color: red;
            font-style: italic;
            margin-left: 600px;

        }

        p .smaller {
            font-size: large;
        }

        .dad>span {
            font-size: large;
            color: aqua;
        }

        .container {
            width: 250px;
            height: 250px;
            border: 5px #a5a5a5 solid;
            background-color: antiquewhite;
            position: relative;
            overflow: hidden;
        }

        .content {
            height: 0;
            width: 100%;
            position: absolute;
            transition:  1s ease;
            bottom: 0;
        }

        .container:hover .content {
            bottom: 100%;

        }

        .num:nth-child(2n) {
            color: red;
            font-style: italic;
        }
        .num:nth-child(2n+1){
            color: yellow;
            font-style: bold;
        }
    </style>
</head>

<body>
    <p>你好</p>
    <p class="lei">这个标签有类名</p>
    <p id="name" class="lei">这个标签有id和类名</p>
    <p id="name">这个标签只有id</p>
    <h1>h1标签和h2一起</h1>
    <h2> h2标签和h3一起</h2>
    <h3>h3标签和h4一起</h3>
    <h4>h4标签和h1一起</h4>
    <p>
    <p class="smaller">这个标签是某个标签的后代</p>
    </p>
    <div class="dad"><span>大哥</span>
        <span>二哥</span>
        <span>老幺</span>
        <div>
            <span>私生子</span>
        </div>
    </div>
    <div><span>外甥</span></div>
    <div class="container">
        <div class="content">
            这里有个伪类选择器:浮动效果
        </div>
    </div>
    <p class="num">这是个奇数第一个</p>
    <p class="num">偶数第二个</p>
    <p class="num">第三个</p>
    <p class="num">以此类推</p>

</body>

</html>